import React from 'react';
import {StyleSheet, Text, View, Image} from 'react-native';
import fs from '../../../images/fs.png';
import zan from '../../../images/zan.png';
import aite from '../../../images/aite.png';
import pl from '../../../images/pl.png';
import IconButton from '../../../components/IconButton';

let btnsData = [
  {
    img: fs,
    title: '粉丝',
  },
  {
    img: zan,
    title: '赞',
  },
  {
    img: aite,
    title: '@我的',
  },
  {
    img: pl,
    title: '评论',
  },
];
let msgsData = [
  {
    img:
      'https://img20.360buyimg.com/img/s100x100_jfs/t1/24679/10/15383/121885/5cafe615E8073ce17/86005f80ee349ce4.jpg!cc_100x100.webp',
    title: '酒厂小助手',
    text: '酒类大折扣，田纳西威士忌5折起',
    time: '2020-2-15',
  },
  {
    img:
      'https://img11.360buyimg.com/img/s100x100_jfs/t1/59621/9/2235/205921/5d08bcf0Ef5b9d513/7752e98bf9a4eb32.jpg!cc_100x100.webp',
    title: '水果生鲜',
    text: '新鲜杨梅3斤装 杨梅水果福建早梅',
    time: '2020-2-2',
  },
  {
    img:
      'https://img11.360buyimg.com/jdcms/s130x130_jfs/t19282/199/1146756958/699632/6fcc908d/5abcb5adN3ec0eb08.jpg!q80.webp',
    title: '清扬男士',
    text:
      '清扬(CLEAR)男士去屑洗发水套装 活力运动薄荷型720gx2送活力运动薄荷100gx2',
    time: '2020-3-25',
  },
];
let friendsData = [
  {
    img: 'https://i02piccdn.sogoucdn.com/653cc050e0608363',
    name: '黑猫',
    disc: '通讯录好友某某某',
  },
  {
    img: 'https://i03piccdn.sogoucdn.com/8c7136aa97bb912b',
    name: '小黄鸭',
    disc: '通讯录好友某某某',
  },
  {
    img: 'https://i02piccdn.sogoucdn.com/33b9c39470d4f206',
    name: '狗子',
    disc: '通讯录好友某某某',
  },
];

const message = () => {
  return (
    <View style={{flex: 1, backgroundColor: '#161824'}}>
      <Btns />
      <Msgs />
      <RecommendAttention />
    </View>
  );
};

function Btns() {
  return (
    <View style={styles.btns}>
      {btnsData.map((v, k) => {
        return (
          <View key={k} style={styles.btnsItem}>
            <Image style={{width: 45, height: 45}} source={v.img} />
            <Text style={styles.btnsItemText}>{v.title}</Text>
          </View>
        );
      })}
    </View>
  );
}

function Msgs() {
  return (
    <View style={styles.msgs}>
      {msgsData.map((v, k) => {
        return (
          <View key={k} style={styles.msgsItem}>
            <Image
              style={{width: 50, height: 50, borderRadius: 25}}
              source={{
                uri: v.img,
              }}
            />
            <View style={{flex: 1, paddingLeft: 15, paddingRight: 15}}>
              <Text style={styles.msgsItemText}>{v.title}</Text>
              <Text style={styles.msgsItemText}>{v.text}</Text>
            </View>
            <Text style={styles.msgsTimeText}>{v.time}</Text>
          </View>
        );
      })}
    </View>
  );
}
function RecommendAttention() {
  return (
    <View style={{flex: 1, paddingTop: 12, paddingLeft: 20, paddingRight: 10}}>
      <View style={{flexDirection: 'row', alignItems: 'center'}}>
        <Text style={{color: '#ccc', fontSize: 15}}>推荐关注</Text>
        <View
          style={{
            width: 16,
            height: 16,
            borderRadius: 8,
            borderWidth: 1,
            borderColor: '#ccc',
            marginLeft: 5,
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <IconButton name="info" color="#ccc" size={14} />
        </View>
      </View>
      {friendsData.map((v, k) => {
        return (
          <View key={k} style={styles.friendsList}>
            <Image
              style={{width: 50, height: 50, borderRadius: 25}}
              source={{
                uri: v.img,
              }}
            />
            <View style={{paddingLeft: 15, paddingRight: 15, flex: 1}}>
              <Text style={styles.msgsItemText}>{v.name}</Text>
              <Text style={styles.msgsItemText}>{v.disc}</Text>
            </View>
            <View style={styles.activeBtn}>
              <Text style={styles.activeBtnText}>关注</Text>
            </View>
            <IconButton name="close" color="#fff" />
          </View>
        );
      })}
    </View>
  );
}

export default message;

const styles = StyleSheet.create({
  btns: {
    width: '100%',
    height: 140,
    paddingTop: 20,
    flexDirection: 'row',
    borderBottomWidth: 1,
    borderTopWidth: 1,
    borderColor: '#262833',
  },
  btnsItem: {width: '25%', height: '100%', alignItems: 'center'},
  btnsItemText: {
    color: '#fff',
    fontSize: 18,
    fontWeight: 'bold',
    paddingTop: 10,
  },
  msgs: {
    width: '100%',
    height: 280,
    borderBottomWidth: 1,
    borderColor: '#262833',
    paddingTop: 12,
    paddingLeft: 20,
    paddingRight: 10,
  },
  msgsItem: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 15,
    marginBottom: 15,
  },
  msgsItemText: {
    color: '#fff',
    fontSize: 16,
  },
  msgsTimeText: {
    color: '#ccc',
  },
  activeBtn: {
    padding: 8,
    paddingLeft: 25,
    paddingRight: 25,
    backgroundColor: '#fb3f59',
    marginRight: 20,
  },
  activeBtnText: {
    color: '#fff',
    textAlign: 'center',
    textAlignVertical: 'center',
  },
  friendsList: {
    width: '100%',
    flexDirection: 'row',
    marginTop: 20,
    alignItems: 'center',
    marginBottom: 10,
  },
});
